<!--入库明细-->
<template>
  <div class="inbound-detail-container">
    <!-- 筛选区域 -->
    <div class="controls-section">
        <div class="filters">
            <div class="filter-item">
                <label>关键词</label>
                <input type="text" placeholder="请输入入库流水号/产品名称" v-model="query.keyword">
            </div>
            <div class="filter-item">
                <label>产品类型</label>
                <select v-model="query.productType">
                    <option value="">全部</option>
                    <option :value="0">成品</option>
                    <option :value="1">半成品</option>
                    <option :value="2">残次品</option>
                </select>
            </div>
        </div>
        <div class="actions">
            <button class="btn-primary" @click="onSearch">搜索</button>
            <button class="btn-secondary" @click="onReset">重置</button>
        </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="allSelected"></th>
            <th>入库流水号</th>
            <th>入库时间</th>
            <th>入库类型</th>
            <th>入库单号</th>
            <th>产品名称</th>
            <th>规格</th>
            <th>分类</th>
            <th>单位</th>
            <th>入库仓库</th>
            <th>入库数量</th>
            <th>入库人</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="loading">
            <td colspan="11" style="text-align: center; padding: 20px;">加载中...</td>
          </tr>
          <tr v-for="(item, index) in details" :key="index">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td class="link-style" @click="viewDetail(item)">{{ item.flowNo || '-' }}</td>
            <td>{{ item.inboundTime || '-' }}</td>
            <td>{{ inboundTypeLabel(item.inboundType) }}</td>
            <td class="link-style">{{ item.orderNo || '-' }}</td>
            <td>{{ item.productName || '-' }}</td>
            <td>{{ item.specification || '-' }}</td>
            <td>{{ categoryLabel(item.category) }}</td>
            <td>{{ item.unitName || '-' }}</td>
            <td>{{ item.warehouseName || '-' }}</td>
            <td>{{ item.quantity || '-' }}</td>
            <td>{{ item.operatorName || '-' }}</td>
            <td>{{ item.remark || '-' }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 底部区域 -->
    <div class="footer-section">
      <div class="footer-left">
        <input type="checkbox" v-model="allSelected">
        <label>全选</label>
        <button class="btn-secondary">导出</button>
      </div>
      <div class="pagination">
        <button @click="onPageChange(query.pageNum - 1)" :disabled="query.pageNum === 1">&lt;</button>
        <button v-for="page in totalPages" :key="page" @click="onPageChange(page)" :class="{ active: query.pageNum === page }">{{ page }}</button>
        <button @click="onPageChange(query.pageNum + 1)" :disabled="query.pageNum === totalPages">&gt;</button>
        <select v-model.number="query.pageSize" @change="onPageSizeChange">
          <option value="5">5条/页</option>
          <option value="10">10条/页</option>
          <option value="20">20条/页</option>
          <option value="50">50条/页</option>
        </select>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailVisible" title="入库明细详情" width="720px">
      <div class="detail-grid">
        <div class="detail-item">
          <div class="label">入库流水号</div>
          <div class="value">{{ detailData.flowNo || '-' }}</div>
        </div>
        <div class="detail-item">
          <div class="label">入库时间</div>
          <div class="value">{{ detailData.inboundTime || '-' }}</div>
        </div>
        <div class="detail-item">
          <div class="label">入库类型</div>
          <div class="value">{{ inboundTypeLabel(detailData.inboundType) }}</div>
        </div>
        <div class="detail-item">
          <div class="label">入库单号</div>
          <div class="value">{{ detailData.orderNo || '-' }}</div>
        </div>
        <div class="detail-item">
          <div class="label">产品名称</div>
          <div class="value">{{ detailData.productName || '-' }}</div>
        </div>
        <div class="detail-item">
          <div class="label">规格</div>
          <div class="value">{{ detailData.specification || '-' }}</div>
        </div>
        <div class="detail-item">
          <div class="label">分类</div>
          <div class="value">{{ categoryLabel(detailData.category) }}</div>
        </div>
        <div class="detail-item">
          <div class="label">单位</div>
          <div class="value">{{ detailData.unitName || '-' }}</div>
        </div>
        <div class="detail-item">
          <div class="label">入库仓库</div>
          <div class="value">{{ detailData.warehouseName || '-' }}</div>
        </div>
        <div class="detail-item">
          <div class="label">入库数量</div>
          <div class="value">{{ detailData.quantity || '-' }}</div>
        </div>
        <div class="detail-item">
          <div class="label">入库人</div>
          <div class="value">{{ detailData.operatorName || '-' }}</div>
        </div>
        <div class="detail-item">
          <div class="label">备注</div>
          <div class="value">{{ detailData.remark || '-' }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pageInboundDetails, getInboundDetail } from '@/api/warehouse/WarehouseReceiptDetail'
import { ElMessage } from 'element-plus'

export default {
  name: 'InboundDetail',
  data() {
    return {
      loading: false,
      // 查询条件
      query: {
        keyword: '',
        productType: '',
        pageNum: 1,
        pageSize: 10,
      },
      // 分页数据
      total: 0,
      details: [],
      // 详情弹窗
      detailVisible: false,
      detailData: {},
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.details.length > 0 && this.details.every(item => item.selected);
      },
      set(value) {
        this.details.forEach(item => {
          item.selected = value;
        });
      }
    },
    totalPages() {
      return Math.ceil(this.total / this.query.pageSize);
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      this.loading = true
      try {
        const payload = {
          // 与后端 WarehouseReceiptDetailQueryDTO 对齐
          // 由于界面只有一个关键词输入框，兼容性地把同一关键词传给 receiptNo 与 productName
          receiptNo: (this.query.keyword || '').trim() || undefined,
          productName: (this.query.keyword || '').trim() || undefined,
          category: this.query.productType === '' ? undefined : Number(this.query.productType),
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
        }
        const res = await pageInboundDetails(payload)
        const data = res.data?.data || {}
        const records = data.records || data.list || []
        this.total = data.total || 0
        // 适配选中字段
        this.details = records.map(r => ({
          selected: false,
          // 兼容后端把入库人字段命名为 username 的情况
          operatorName: r.operatorName || r.username,
          ...r
        }))
      } catch (e) {
        console.warn('入库明细数据加载失败，使用默认数据')
        // 使用默认数据作为降级方案
        this.details = [
          { selected: false, flowNo: 'RKLL203506160001', inboundTime: '2035-06-19', inboundType: 0, orderNo: 'RK203506160001', productName: '四旋翼无人机 PD203506190003', specification: '80V', category: 0, unitName: '个', warehouseName: '主仓库', quantity: 100, operatorName: '张三', remark: '生产入库' },
          { selected: false, flowNo: 'RKLL203506160025', inboundTime: '2035-06-19', inboundType: 1, orderNo: 'RK203506160025', productName: '单旋翼无人机 PD203506190012', specification: '灵动型', category: 0, unitName: '个', warehouseName: '成品仓库', quantity: 50, operatorName: '李四', remark: '采购入库' },
          { selected: false, flowNo: 'RKLL203506160038', inboundTime: '2035-06-19', inboundType: 2, orderNo: 'RK203506160038', productName: '微型仿生无人机 PD203506190056', specification: '微型', category: 0, unitName: '个', warehouseName: '主仓库', quantity: 30, operatorName: '王五', remark: '销售退货' },
        ]
        this.total = this.details.length
      } finally {
        this.loading = false
      }
    },
    onSearch() {
      this.query.pageNum = 1
      this.fetchList()
    },
    onReset() {
      this.query = { keyword: '', productType: '', pageNum: 1, pageSize: 10 }
      this.fetchList()
    },
    onPageChange(page) {
      const totalPages = Math.max(1, Math.ceil(this.total / this.query.pageSize))
      const next = Math.min(Math.max(1, page), totalPages)
      if (next === this.query.pageNum) return
      this.query.pageNum = next
      this.fetchList()
    },
    onPageSizeChange() {
      this.query.pageNum = 1
      this.fetchList()
    },
    async viewDetail(row) {
      if (!row?.id) return
      try {
        const res = await getInboundDetail(row.id)
        this.detailData = res.data?.data || {}
        this.detailVisible = true
      } catch (e) {
        // 如果API调用失败，使用当前行数据
        this.detailData = row
        this.detailVisible = true
      }
    },
    inboundTypeLabel(val) {
      const types = {
        0: '生产入库',
        1: '采购入库',
        2: '销售退货',
        3: '生产退料',
        4: '委外入库',
        5: '其他入库'
      }
      return types[val] || '-'
    },
    categoryLabel(val) {
      if (val === 0 || val === '0') return '成品'
      if (val === 1 || val === '1') return '半成品'
      if (val === 2 || val === '2') return '残次品'
      return '-'
    }
  }
}
</script>

<style scoped>
.inbound-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.controls-section {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  align-items: center;
}

.filters {
    display: flex;
    gap: 16px;
    align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  font-size: 14px;
}

.filter-item input, .filter-item select {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.filter-item input {
    width: 240px;
}

.actions {
  margin-left: auto;
}

.btn-primary {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.table-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

th {
  background-color: #f8f9fa;
}

.link-style {
    color: #409eff;
    cursor: pointer;
}

.footer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.pagination select {
  padding: 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item .label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.detail-item .value {
  font-size: 14px;
  color: #303133;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
  min-height: 20px;
}
</style>
